import React, { useState, useEffect } from 'react'
import {
  Form, Input, Button,
  Select, Spin, message
} from 'antd';
// 【1】引入编辑器组件
import BraftEditor from 'braft-editor'
// 【1】引入编辑器样式
import 'braft-editor/dist/index.css'
import JobMap from '../../components/JobMap'
const layout = {
  labelCol: {
    span: 2,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const JobPub = (props) => {
  const [form] = Form.useForm();  //获取表单对象
  let [loading, setLoading] = useState(false)  //控制loading窗
  let [editorState, setEditorState] = useState(BraftEditor.createEditorState(null)) //【2】定义一个获取富文本内容的对象，存储在state中

  const onFinish = (values) => {  //表单的submit触发的事件函数
    console.log(values);
    console.log(editorState.toHTML());  //【5】提取富文本编辑器内容
  }

  const onReset = () => {
    form.resetFields();
  }

  const handleEditorChange = (editorState) => {  //【3】用户修改富文本时，同步修改state数据
    setEditorState(editorState)
  }
  return (
    <Spin spinning={loading}>
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
        <Form.Item
          name="jobname"
          label="岗位名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="岗位描述"
          rules={[
            {
              required: true,
            },
          ]}
        >
          {/* 【3】此处渲染富文本编辑器 */}
          <div style={{border:'1px solid #d8d8d8'}}>
            <BraftEditor 
              value={editorState} 
              onChange={handleEditorChange}
            />
          </div>
        </Form.Item>
        <Form.Item
          name="address"
          label="地图选址"
        >
            <JobMap/>
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            确定发布
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置表单
          </Button>
        </Form.Item>
      </Form>
    </Spin>
  );
};

export default JobPub
